<div class="store-container" admin-store-data>
  <div class="am-cf am-padding">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">Store</strong> / <small>Item</small></div>
      </div>

      <div class="am-g">
        <div class="am-u-sm-12 am-u-md-6">
          <div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
              <button type="button" class="am-btn am-btn-default" data-am-modal="{target: '#add-store-modal', closeViaDimmer: 0, width: 400, height: 500}"><span class="am-icon-plus"></span> Add</button>
              <button type="button" class="am-btn am-btn-default" admin-edit-store><span class="am-icon-edit"></span> Edit</button>
              <button type="button" class="am-btn am-btn-default" admin-delete-store><span class="am-icon-trash-o"></span> Delete</button>
            </div>
          </div>
        </div>
        <div class="am-u-sm-6 am-u-md-2">
          <div class="am-form-group store-page-list">
            <select id="page-size">
              <option value="10">10</option>
              <option value="20">20</option>
              <option value="50">50</option>
              <option value="All">All</option>
            </select>
          </div>
        </div>
        <div class="am-u-sm-12 am-u-md-3">
          <div class="am-input-group am-input-group-sm store-filter">
            <input type="text" class="am-form-field search-store" ng-keyup="searchstores($event)" ng-model="search">
            <span class="am-input-group-btn">
              <button class="am-btn am-btn-default" type="button">Search</button>
            </span>
          </div>
        </div>
      </div>

      <div class="am-g">
        <div class="am-u-sm-12">
            <table class="am-table am-table-striped am-table-hover table-main" id="store-table">
              <thead>
                <tr>
                  <th class="table-check"></th>
                  <th class="table-id">ID</th>
                  <th class="table-title">ItemName</th>
                  <th class="table-title">Sku</th>
                  <th class="table-title">Quantity</th>
                  <th class="table-title">Price</th>
                  <th class="table-title">Description</th>
                  <th class="table-set">Operation</th>
                </tr>
            </thead>
            <tbody>
              <tr ng-repeat="store in stores.result">
                <td class="select-column"><input type="checkbox" name="select-single-store" class="select-single-record" ng-click="selectSingleRecord($event)"/></td>
                <td class="storeId">{{store.id}}</td>
                <td class="storeItemName">{{store.itemName}}</td>
                <td class="storeSku">{{store.sku}}</td>
                <td class="storeQuantity">{{store.quantity}}</td>
                <td class="storePrice">{{store.price}}</td>
                <td class="storeDescription">{{store.description}}</td>
                <td>
                  <div class="am-btn-toolbar">
                    <div class="am-btn-group am-btn-group-xs">
                      <button class="am-btn am-btn-default am-btn-xs am-text-secondary store-edit" ng-click="edit(store)"><span class="am-icon-pencil-square-o"></span> Edit</button>
                      <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only" ng-click="remove(store)"><span class="am-icon-trash-o"></span> Delete</button>
                    </div>
                  </div>
                </td>
              </tr> 
             
            </tbody>
          </table>
            <div class="am-cf">
              Total <span class="store-total-record">0</span> records
        <div class="am-fr">
          <ul class="am-pagination store-pager-container">
          </ul>
        </div>
        </div>
     <hr />
       <p>Attention</p>
     </div>
  </div>
</div>

<div class="am-modal am-modal-no-btn" tabindex="-1" id="add-store-modal">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">Add Store Item 
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
    
    </div>
    <div class="am-modal-bd ">
       <form class="am-form" id="add-store-form" data-am-validator>
      <fieldset>
         <div class="am-form-group">
            <label for="doc-vld-name-2">store Name：</label>
            <input type="text" name="storeItemName" id="doc-vld-name-2" minlength="1" placeholder="Name" required/>
            <label for="doc-vld-name-3">store Sku：</label>
            <input type="text" name="storeSku" id="doc-vld-name-3" minlength="1" placeholder="Sku" required/>
            <label for="doc-vld-name-4">store Quantity：</label>
            <input type="number" name="storeQuantity" id="doc-vld-name-4" minlength="1" placeholder="Quantity"  required/>
            <label for="doc-vld-name-5">store Price：</label>
            <input type="number" name="storePrice" id="doc-vld-name-5" minlength="1" step="0.01" placeholder="Price" required/>
            <label for="doc-vld-name-3">store ：Description</label>
            <input type="text" name="storeDescription" id="doc-vld-name-3" minlength="1" placeholder="Description"  required/>
        </div>
        <button class="am-btn am-btn-secondary" data-oper="add" data-id="0" admin-operate-store>Add</button>
      </fieldset>
    </form>
    </div>
  </div>
</div>

<div class="am-modal am-modal-no-btn" tabindex="-1" id="edit-store-modal">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">Edit Store Item 
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
    </div>
    <div class="am-modal-bd">
       <form class="am-form" id="edit-store-form" data-am-validator>
        <fieldset>
          <div class="am-form-group">
            <label for="doc-vld-name-2">store Name：</label>
            <input type="text" name="storeItemName" id="doc-vld-name-2" minlength="1" placeholder="Name" ng-model="storeItemName" required/>
            <label for="doc-vld-name-3">store Sku：</label>
            <input type="text" name="storeSku" id="doc-vld-name-3" minlength="1" placeholder="Sku" ng-model="storeSku" required/>
            <label for="doc-vld-name-4">store Quantity：</label>
            <input type="number" name="storeQuantity" id="doc-vld-name-4" minlength="1" placeholder="Quantity" ng-model="storeQuantity" required/>
            <label for="doc-vld-name-5">store Price：</label>
            <input type="number" name="storePrice" id="doc-vld-name-5" minlength="1" step="0.01" placeholder="Price" ng-model="storePrice" required/>
            <label for="doc-vld-name-3">store ：Description</label>
            <input type="text" name="storeDescription" id="doc-vld-name-3" minlength="1" placeholder="Description" ng-model="storeDescription" required/>
          </div>
          <button class="am-btn am-btn-secondary" data-oper="edit" admin-operate-store>Update</button>
        </fieldset>
      </form>
    </div>
  </div>
</div>

<div class="am-modal am-modal-confirm" tabindex="-1" id="delete-store-modal">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">Delete Confirm</div>
    <div class="am-modal-bd">
      Are you sure to delete the record?
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>Cancel</span>
      <span class="am-modal-btn delete-store-btn" data-oper="del" data-am-modal-confirm admin-operate-store>Delete</span>
    </div>
  </div>
</div>

<div class="am-modal am-modal-alert" tabindex="-1" id="store-warning">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">Warning</div>
    <div class="am-modal-bd">
      Please select a store to operate.
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn">Close</span>
    </div>
  </div>
</div>

